<template>
	<div class="u-page u-page-color-other">
		<u-navbar :title="navbar.title" :background="navbar.background" :border-bottom="false" :custom-back="comeBackCustom" title-width="300" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<div style="font-weight: bold;width: 95%;margin: 0 auto;">
			<u-tabs :list="list" bg-color="#fffbfe" :show-bar="false" active-color="#000000" inactive-color="#6b6969"
				:active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="13" :current="current" @change="change"></u-tabs>
		</div>
		<div>
			<div :class="index == 0?'':'u-mt-10'" style="background-color: #ffffff;width: 95%;margin: 0 auto;border-radius: 10rpx;box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb;" v-for="(item,index) in solitaireList" v-if="solitaireList && solitaireList.length>0">
				<div @click="toDetails(item)">
					<div style="display: flex;justify-content: space-between;padding: 30rpx 30rpx 5rpx 30rpx;">
						<div style="color: #000000;font-size: 34rpx;font-weight: bold;width: 460rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height: 50rpx;line-height: 50rpx;">
							{{item.goodsName}}
						</div>
						<div style="color: #bcbcbc;height: 50rpx;line-height: 50rpx;">
							{{item.createTime.split(" ")[0]}}
						</div>
					</div>
					<div class="u-flex" style="padding: 5rpx 30rpx;">
						<div style="color: #f94d4d;font-size: 44rpx;font-weight: bold;margin: 0 10rpx 10rpx 0;">&yen;{{item.distributionReward}}</div>
						<div><u-tag text="代理销售佣金" mode="plain" size="mini" color="#f94d4d" border-color="#f94d4d" /></div>
					</div>
					<div class="u-flex" style="padding: 0 20rpx;">
						<div class="u-pl-5" v-for="(titem,tindex) in item.goodsImages.split(',')" v-if="tindex<3">
							<u-image width="220rpx" height="220rpx" :src="titem" border-radius="10"></u-image>
						</div>
					</div>
				</div>
				<div class="u-flex" style="padding: 20rpx 30rpx;display: flex;justify-content: space-between;">
					<div style="color: #ea4d5e;" v-if="item.status == 1">
						品牌活动进行中
					</div>
					<div style="color: #696868;" v-else>
						品牌活动已结束
					</div>
					<div>
						<button class="my-jobs-share" @click="wakeShareModule(item,index)">
							<span>邀请好友</span>
						</button>
						<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url"
							:route="shareData.route" :style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"
							btnText="我的代理海报" ref="shareModule"></ShareBtn>
					</div>
				</div>
				<div class="u-border-top" style="padding: 20rpx 30rpx;color: #bcbcbc;">
					<!-- <div>已售{{item.groupOrdersInfo.completedGoodsQuantity}}件商品，预计收入&yen;{{item.groupOrdersInfo.totalReward}}</div> -->
					<!-- <div>实际收入&yen;{{item.groupOrdersInfo.completedReward}}，退款金额&yen;{{item.groupOrdersInfo.refundAmount}}，确认收货{{item.groupOrdersInfo.completedOrderQuantity}}单({{item.groupOrdersInfo.totalGoodsQuantity}}件商品)</div> -->
					<div>已有{{item.groupOrdersInfo.totalOrderQuantity}}人参与活动，实际收入&yen;{{item.groupOrdersInfo.completedReward}}</div>
				</div>
			</div>
			<div v-else>
				<div class="u-text-center" style="padding-top: 20%;">
					<u-empty text="暂无数据" mode="data"></u-empty>
				</div>
			</div>
		</div>
		
		<!-- “分享”按钮弹窗，提示【注册区域服务商】 -->
		<u-modal v-model="share_show" :show-title="false" :show-confirm-button="!isProvider" :mask-close-able="true"
			confirm-text="立即申请" confirm-color="#e55e97" @confirm="applyProvider">
			<div class="slot-content4" style="text-align: center;">
				<p>成为区域服务商代理销售商品</p>
				<p>每单赚
					<span class="color-red">&yen;{{parseFloat(goods.foremanReward?goods.foremanReward:0)}}~&yen;{{(parseFloat(goods.foremanReward?goods.foremanReward:0) + parseFloat(goods.tenThousandOnlineCashback?goods.tenThousandOnlineCashback:0) + parseFloat(goods.tenThousandProviderCashback?goods.tenThousandProviderCashback:0)).toFixed(2)}}</span>
				</p>
			</div>
		</u-modal>
	
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				isProvider: false, // 是否已成为区域服务商
				share_show: false, // “分享”按钮弹窗
				goods: {}, // 商品信息
				UserInfo: {},
				navbar: {
					title: '我的代理列表',
					background: {
						backgroundColor: '#f3e4e9',
					}
				},
				list: [
					{name: '进行中'},
					{name: '已结束'}
				],
				current: 0,
				pageNum: 1,
				pageSize: 5,
				keyword: '',
				sceneAssetsId: '',
				status: 1,
				solitaireList: [],
				shareData: {
					docUnid: '',
					url: '',
					style: 9,
					type: 2,
					route: '',
					posterData: {},
					imageUrl: '',
					shareTitle: ''
				},
			};
		},

		onLoad(options) {
			this.UserInfo = uni.getStorageSync('userInfo')
			this.getGroupPurchaseList()
			this.getDataInit(2)
		},
		
		onShow(){
			// 每次进入页面都需要判断是否已成为区域服务商
			this.getProvider();
		},
		
		onPullDownRefresh() {
			this.pageNum = 1
			this.getGroupPurchaseList()
			setTimeout(() => {
				// 停止Loading
				uni.stopPullDownRefresh();
			}, 1000)
		},
		
		onReachBottom() {
			this.pageNum += 1
			this.getGroupPurchaseList()
		},

		methods: {
			
			/**
			 * 判断当前用户是否已成为区域服务商
			 */
			async getProvider(){
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/provider/info",
					userId: uni.getStorageSync('userInfo').userId,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.isNotNull(result.data)) { //已经注册区域服务商
						this.isProvider = true
					}
				} else {
					this.showMSG('error', '出错啦！');
				}
			},
			
			/** 
			 * 返回跳转到"我的"页面
			 */
			comeBackCustom(){
				uni.reLaunch({url:'/pages/index/incomeIndex'});
			},
			
			change(index) {
				this.current = index
				this.status = index + 1
				this.pageNum = 1
				this.getGroupPurchaseList()
			},
			
			/**
			 * 获取团购列表
			 */
			async getGroupPurchaseList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/getPublishGroupPurchaseList",
					initiatorId: this.UserInfo.userId,
					partnerId: this.UserInfo.userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.keyword,
					sceneAssetsId: this.sceneAssetsId,
					status: this.status,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if(this.status == 1){
						this.list[0].name = '进行中(' + result.total + ')'
					}else if(this.status == 2){
						this.list[1].name = '已结束(' + result.total + ')'
					}
					if(this.pageNum != 1) {
						this.solitaireList = this.solitaireList.concat(result.rows)
					} else {
						this.solitaireList = result.rows
					}
				}
			},
			
			/**
			 * 获取团购列表（加载数量）
			 */
			async getDataInit(tab) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/buying/getPublishGroupPurchaseList",
					initiatorId: this.UserInfo.userId,
					partnerId: this.UserInfo.userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					searchStr: this.keyword,
					sceneAssetsId: this.sceneAssetsId,
					status: tab,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if(tab == 2){
						this.list[1].name = '已结束(' + result.total + ')'
					}
				}
			},
			
			/** 
			 * 去销售详情
			 */
			toDetails(item) {
				this.$u.route('/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid=' + item.id)
			},
			
			/**
			 * 唤起分享组件弹出
			 */
			async wakeShareModule(item,index) {
				if(this.isProvider){// 已成为区域服务商，直接分享
					let that = this
					that.shareData.docUnid = item.goodsNo
					that.shareData.url = '/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid=' + item.id
					let obj = {
							imageURL: item.goodsImages.split(",")[0], // 商品主图URL地址
							productName: item.goodsName, // 商品名称
							productPrice: item.unitPrice, // 商品价格
							invitemsg: '邀请您参与活动', // 邀请内容。如邀请购买商品，可不传。默认邀请
							type: 'tghd'
						}
					that.shareData.posterData = obj
					that.shareData.imageUrl = item.goodsImages.split(",")[0]
					that.shareData.shareTitle = item.groupOrdersInfo.shareTitle
					that.$refs.shareModule[index].wakeUpPop()
				} else {
					// 获取商品详情
					let result = await this.$u.api.unifyMiniRestGet({
						systemid: "meily",
						url: "/goods/get/" + item.goodsNo,
					});
					if (result.code == 200) {
						this.goods = result.data;
						this.share_show = true;
					} else {
						this.showMSG("出错了！");
					}
				}
			},
			
			/**
			 * 跳转到申请区域服务商
			 */
			applyProvider() {
				this.$u.route('/pages_tabbar_contact/personal_contact/VPSRegister')
			}
		},
	};
</script>

<style scoped>
	.my-jobs-share {
		font-size: 26rpx;
		width: 170rpx;
		height: 75rpx;
		line-height: 75rpx;
		padding: 0;
		color: #696868;
		border: 1rpx solid #696868 !important;
		background-color: #ffffff;
		float: left;
		margin-right: 1rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
	}
	
	.slot-content4 {
		font-size: 32rpx;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}
	
	.color-red {
		color: red;
	}
</style>